<template>
  <Form v-model="form" :label-width="80" style="max-width:700px;">
    <FormItem label="订单id">
      <span>{{form.id}}</span>
    </FormItem>

    <FormItem label="快递订单">
      <Input v-model="form.express_no"></Input>
    </FormItem>

    <FormItem label="快递费用">
      <Input v-model="form.express_fee"></Input>
    </FormItem>

    <FormItem label="收件人">
      <Input v-model="form.accept_name"></Input>
    </FormItem>

    <FormItem label="收货电话">
      <Input v-model="form.mobile"></Input>
    </FormItem>

    <FormItem label="收货手机">
      <Input v-model="form.mobile"></Input>
    </FormItem>

    <FormItem label="收货邮箱">
      <Input v-model="form.email"></Input>
    </FormItem>

    <FormItem label="收货地区">
      <Input v-model="form.address"></Input>
    </FormItem>

    <FormItem label="收货地址">
      <Input v-model="form.area" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder></Input>
    </FormItem>

    <FormItem label="收货备注">
      <Input v-model="form.message" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder></Input>
    </FormItem>

    <FormItem label="总金额">
      <Input v-model="form.order_amount"></Input>
    </FormItem>

    <FormItem label="订单状态">
      <Row>
        <Col span="12" style="padding-right:10px">
          <Select :placeholder="oderStatusText" @on-change="onchangstatus" filterable>
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
      </Row>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="onSubmit">确认修改</Button>
      <Button style="margin-left: 8px" @click="onRest">取消</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      form: {
        id: 0,
        express_no: "",
        express_fee: 0,
        accept_name: "",
        telphone: "",
        mobile: "",
        email: "",
        area: "",
        address: "",
        message: "",
        order_amount: 0,
        orderstatus: 0
      },

      cityList: [
        {
          value: "1",
          label: "订单已经生成（待付款）"
        },
        {
          value: "2",
          label: "已付款等待发货"
        },
        {
          value: "3",
          label: "已发货，待完成"
        },
        {
          value: "4",
          label: "已签收，已完成"
        },
        {
          value: "5",
          label: "已取消"
        }
      ],
      oderStatusText: ""
    };
  },

  mounted() {
    const id = this.$route.params.id;
    // console.log(id);
    this.id = id;
    this.$axios({
      url: `/admin/order/getorderdetial/${id}`,
      withCredentials: true
    }).then(res => {
      // console.log(res);
      const fromdata = res.data.message.orderinfo;
      // console.log(fromdata);
      // console.log(fromdata.address);
      // this.form=fromdata;
      // this.form = {...this.form,...fromdata};
      // this.from.express_no = fromdata.express_no;
      let data = {};

      Object.keys(fromdata).forEach((k, v) => {
        // console.log(k)
        // console.log(v)
        if (this.form.hasOwnProperty(k)) {
          data[k] = fromdata[k];
          // data.k = fromdata.k
        }
      });
      this.form = data;

      if (this.form.orderstatus == 1) {
        this.oderStatusText = "订单已经生成（待付款）";
      } else if (this.form.orderstatus == 2) {
        this.oderStatusText = "已付款等待发货";
      } else if (this.form.orderstatus == 3) {
        this.oderStatusText = "已发货，待完成";
      } else if (this.form.orderstatus == 4) {
        this.oderStatusText = "已签收，已完成";
      } else if ((this.form.orderstatus = 5)) {
        this.oderStatusText = "已取消";
      }
    });
  },

  methods: {
    onSubmit() {
      this.$axios({
        url: `admin/order/updateorder`,
        method: "POST",
        data: {
          orderinfo: this.form
        },
        withCredentials: true
      }).then(res => {
        const { message } = res.data;
        // 这是elementui写法
        // this.$message({
        //   message: "修改成功",
        //   type: "success"
        // });
        // 这是iview写法
        this.success("修改成功");

        setTimeout(() => {
          this.$router.back();
        }, 1000);
      });
    },

    onchangstatus(v) {
      this.form.orderstatus = v;
    },
    onRest() {
      this.$router.back();
    },
    success(msg) {
      this.$Message.success(msg);
    }

    // onclick: function(v) {
    //   console.log(v);
    // }
  }

  //编辑商品跳转
};
</script>